import React from "react";
import { Route, Routes } from "react-router";
const HomePage = React.lazy(() => import("@/pages/home"));
const AboutPage = React.lazy(() => import("@/pages/about"));
const DetailPage = React.lazy(() => import("@/pages/detail"));

export const Routers = () => {
  return (
    <>
      <React.Suspense fallback={<div>Loading...</div>}>
        <Routes>
          {[].map((item) => {
            return <></>;
          })}
          <Route path="/" element={<HomePage title={"Hello!"} />}>
            <Route index element={<div>Children Slot</div>}></Route>
          </Route>
          <Route path="/about" element={<AboutPage />}></Route>
          <Route path="/detail/:id" element={<DetailPage />}></Route>
        </Routes>
      </React.Suspense>
    </>
  );
};
